<!-- AlertModal.vue -->
<template>
    <div></div>
  </template>
  
  <script>
  import { library } from '@fortawesome/fontawesome-svg-core'
  import { faExclamationCircle, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
  
  library.add(faExclamationCircle, faCheckCircle)
  
  export default {
    components: {
      
    },
    data() {
      return {
        backendAvailable: true,
      };
    },
    methods: {
      show(available) {
        this.backendAvailable = available;
        this.$bvModal.show('alertModal');
      },
    },
    render(createElement) {
      return createElement('b-modal', {
        attrs: {
          id: 'alertModal',
          title: '服务状态',
          'hide-footer': true,
          centered: true,
        },
        on: {
          show: () => {
            this.show(this.backendAvailable);
          },
        },
      }, [
        !this.backendAvailable ? (
          createElement('div', { class: 'text-center' }, [
            createElement('div', { class: 'icon-container' }, [
              createElement('i', { class: ['fas', 'fa-exclamation-circle', 'fa-4x'] }),
            ]),
            createElement('h1', { class: 'mt-5 mb-4' }, 'Oops! 服务未找到'),
            createElement('p', { class: 'lead mb-4' }, '看起来我们的服务暂时不可用，请稍后再试或联系我们的客服。'),
          ])
        ) : (
          createElement('div', { class: 'text-center' }, [
            createElement('div', { class: 'icon-container' }, [
              createElement('i', { class: ['fas', 'fa-check-circle', 'fa-4x'] }),
            ]),
            createElement('h1', { class: 'mt-5 mb-4' }, '服务可用'),
            createElement('p', { class: 'lead mb-4' }, '我们的服务已启动并运行良好。'),
          ])
        ),
        createElement('template', { slot: 'modal-footer' }, [
          createElement('button', {
            attrs: { type: 'button', class: 'btn btn-secondary' },
            on: {
              click: () => {
                this.$bvModal.hide('alertModal');
              },
            },
          }, '关闭'),
        ]),
      ]);
    },
  };
  </script>
  
  
  <style scoped>
  .modal-dialog-centered {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .modal-content {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .modal-header {
    background-color: #f8f9fa;
    border-bottom: none;
  }
  
  .modal-title {
    font-weight: bold;
    color: #333;
  }
  
  .modal-body {
    padding: 2rem;
  }
  
  .icon-container {
    margin-bottom: 1rem;
    color: #dc3545; /* 错误颜色 */
  }
  
  .icon-container i {
    display: block;
    margin: auto;
  }
  
  h1, h2 {
    color: #333;
  }
  
  .lead {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
  
  button {
    margin-top: 2rem;
  }
  
  /* 服务可用时的样式 */
  .icon-container.available {
    color: #28a745; /* 成功颜色 */
  }
  </style>
  